<?php
require_once('../wpfunctions.php');
ip_redirectIfNotAdministrator('../');
?>
<!DOCTYPE html>
<!--[if lt IE 7]>      <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Liturgy Editor</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="../css/bootstrap.min.css">
  <link rel="stylesheet" href="../css/bootstrap-additions.min.css">
  <style>
div.panel-heading>button.close + .input-group {
  margin-right: 30px;
}
div[tree-items] [tree-items] {
  margin-left: 18px;
}
.aside-backdrop {
  opacity: 0.75;
}
  </style>
</head>
<body>
  <!--[if lt IE 7]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
  <![endif]-->
  <div class="container" ng-controller="liturgyEditor">
    <div class="row">
      <div class="col-sm-6 col-sm-offset-3">
        <div class="form-group" style="margin-top:15px">
          <button class="btn btn-success" ng-click="showLoad()">Load</button>
        </div>
        <div class="form-group">
          <label class="input-group">
            <span class="input-group-btn"><button class="btn btn-primary" ng-click="save(savePath)" ng-disabled="!savePath">Save:</button></span>
            <input type="text" ng-model="savePath" class="form-control" placeholder="Path" disabled>
          </label>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-6 col-sm-offset-3">
        <div class="form-group">
          <label class="input-group">
            <span class="input-group-addon">Title:</span>
            <input type="text" ng-model="liturgy.title" class="form-control" placeholder="Title" bs-typeahead bs-options="title for title in liturgyTitles" data-limit="100" data-min-length="0">
          </label>
        </div>
        <div class="form-group">
          <label  class="input-group">
            <span class="input-group-addon">Liturgical Category:</span>
            <select class="form-control" ng-model="liturgy.category" ng-options="category for category in liturgicalCategories">
              <option value="">- Select Category -</option>
            </select>
          </label>
        </div>
        <div class="form-group" ng-show="liturgy.category=='Proper of Time'">
          <label class="input-group">
            <span class="input-group-addon">Season:</span>
            <input type="text" ng-model="liturgy.season" class="form-control" placeholder="Season">
          </label>
        </div>
        <div class="form-group" ng-show="liturgy.category=='Proper of Saints'">
          <label class="input-group">
            <span class="input-group-addon">Date:</span>
            <input type="text" ng-model="liturgy.date" class="form-control" placeholder="Date">
          </label>
        </div>
        <div class="form-group" ng-hide="liturgy.category=='Proper of Time' || liturgy.category=='Proper of Saints'">
          <label class="input-group">
            <span class="input-group-addon">Directory:</span>
            <input type="text" ng-model="liturgy.directory" class="form-control" placeholder="Directory">
          </label>
        </div>
        <div class="form-group">
          <label class="input-group">
            <span class="input-group-addon">Qualifier:</span>
            <input type="text" ng-model="liturgy.qualifier" class="form-control" placeholder="Qualifier">
          </label>
        </div>
        <div class="form-group"><button class="btn btn-default" ng-click="liturgy.sections.push({list:[]})">+</button></div>
        <div ng-repeat="section in liturgy.sections" class="panel panel-default" ng-init="">
          <div class="panel-heading">
            <button type="button" class="close" ng-click="removeSubsection(section,liturgy.sections)" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <label class="input-group">
              <span class="input-group-addon">Section:</span>
              <input type="text" ng-model="section.section" class="form-control" placeholder="Section">
            </label>
          </div>
          <div class="panel-body">
            <div class="form-group">
              <div class="btn-group" role="group">
                <button type="button" class="btn btn-default" ng-class="section.sequential?'active':''" ng-click="section.sequential=true;">Sequential</button>
                <button type="button" class="btn btn-default" ng-class="section.sequential?'':'active'" ng-click="section.sequential=false;">Preferential</button>
              </div>
            </div>
            <div class="form-group"><button class="btn btn-default" ng-click="section.list.push({options:[]})">+</button></div>
            <div ng-repeat="sectionOption in section.list" class="panel panel-default">
              <div class="panel-heading">
                <button type="button" class="close" ng-click="removeSubsection(sectionOption,section.list)" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <label class="input-group">
                  <span class="input-group-addon">Section Option Name:</span>
                  <input type="text" ng-model="sectionOption.sectionOption" class="form-control" placeholder="Section">
                </label>
              </div>
              <div class="panel-body">
                <div class="form-group">
                  <label class="input-group">
                    <span class="input-group-addon">Text Type:</span>
                    <select class="form-control" ng-model="sectionOption.textType" ng-options="type for type in textTypes">
                      <option value="">- Select Text Type -</option>
                    </select>
                  </label>
                </div>
                <div class="form-group"><button class="btn btn-default" ng-click="sectionOption.options.push({languages:{}})">+</button></div>
                <div ng-repeat="option in sectionOption.options" class="panel panel-default">
                  <div class="panel-body">
                    <button type="button" class="close" ng-click="removeSubsection(option,sectionOption.options)" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <div class="form-group">
                      <div class="btn-group input-group" ng-model="option.yearABC" bs-checkbox-group>
                        <span class="input-group-addon">Year:</span>
                        <label class="btn btn-default"><input type="checkbox" value="A"> A</label>
                        <label class="btn btn-default"><input type="checkbox" value="B"> B</label>
                        <label class="btn btn-default"><input type="checkbox" value="C"> C</label>
                      </div>
                    </div>
                    <div class="form-group">
                      <div class="btn-group input-group" ng-model="option.year12" bs-checkbox-group>
                        <span class="input-group-addon">Year:</span>
                        <label class="btn btn-default"><input type="checkbox" value="I"> I</label>
                        <label class="btn btn-default"><input type="checkbox" value="II"> II</label>
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="input-group">
                        <span class="input-group-addon">Custom Option Text:</span>
                        <input type="text" ng-model="option.determiner" class="form-control" placeholder="When to use this option">
                      </label>
                    </div>
                    <div class="form-group">
                      <label class="input-group">
                        <span class="input-group-addon">Default Mode:</span>
                        <input type="text" ng-model="option.defaultMode" class="form-control" placeholder="Mode">
                      </label>
                    </div>
                    <div class="form-group form-inline">
                      <div class="form-group" ng-show="languageNames|filterOut:option.languages|hasKeys">
                        <select class="form-control" ng-model="addLanguage" ng-options="code as display for (code,display) in languageNames|filterOut:option.languages" ng-change="option.languages[addLanguage]={musicalSettings:[],defaultPsalmTones:[]};addLanguage='';">
                          <option value="">+</option>
                        </select>
                      </div>
                    </div>
                    <div ng-repeat="(lang,language) in option.languages" class="panel panel-default">
                      <div class="panel-heading"><button type="button" class="close" ng-click="removeSubsection(lang,option.languages)" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button><h3 class="panel-title">{{languageNames[lang]}}</h3></div>
                      <div class="panel-body">
                        <div class="form-group">
                          <label class="input-group">
                            <span class="input-group-addon">Text:</span>
                            <input type="text" ng-model="language.text" class="form-control" placeholder="Path">
                          </label>
                        </div>
                        <div class="form-group" ng-show="sectionOption.textType=='Antiphon'">
                          <label class="input-group">
                            <span class="input-group-addon">Verses:</span>
                            <input type="text" ng-model="language.verses" class="form-control" placeholder="Verses">
                          </label>
                        </div>
                        <div class="form-group">
                          <div class="form-inline">
                            <select class="form-control" ng-model="$root.addPsalmTone" ng-options="tone for tone in psalmTones|filterOut:language.defaultPsalmTones" ng-change="language.defaultPsalmTones.push(addPsalmTone);$root.addPsalmTone='';">
                              <option value="">+Default Psalm Tone</option>
                            </select> [ <span ng-repeat="pt in language.defaultPsalmTones">{{pt}}<span ng-hide="$last">, </span></span> ]
                          </div>
                        </div>
                        <div class="form-group"><button class="btn btn-default" ng-click="language.musicalSettings.push({defaultPsalmTones:[]})">+Musical Setting</button></div>
                        <div ng-repeat="setting in language.musicalSettings" class="panel panel-default">
                          <div class="panel-body">
                            <button type="button" class="close" ng-click="removeSubsection(setting,language.musicalSettings)" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <div class="form-group">
                              <label class="input-group">
                                <span class="input-group-addon">File:</span>
                                <input type="text" ng-model="setting.file" class="form-control" placeholder="Path">
                              </label>
                            </div>
                            <div class="form-inline">
                              <select class="form-control" ng-model="$root.addPsalmTone" ng-options="tone for tone in psalmTones|filterOut:setting.defaultPsalmTones" ng-change="setting.defaultPsalmTones.push(addPsalmTone);$root.addPsalmTone='';">
                                <option value="">+Default Psalm Tone</option>
                              </select> [ <span ng-repeat="pt in setting.defaultPsalmTones">{{pt}}<span ng-hide="$last">, </span></span> ]
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script type="text/ng-template" id="load-aside.html">
  <div class="form-group">
    <label class="input-group" style="width:280px">
      <span class="input-group-btn"><button class="btn btn-default" >Filter:</button></span>
      <input type="text" ng-model="filter" class="form-control" placeholder="Filter">
    </label>
  </div>
  <div ng-show="!error && !items">Loading...</div>
  <div tree-items="items" tree-filter="filter" child-on-click="load(fullPath);$hide();"></div>
  </script>

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/2.2.1/angular-strap.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/2.2.1/angular-strap.tpl.min.js"></script>
  <!--<script src="../angular-1.3.14/angular.min.js"></script>
  <script src="../js/angular-strap.min.js"></script>
  <script src="../js/angular-strap.tpl.min.js"></script>-->
  <script src="liturgy-editor.js"></script>
</body>
</html>